<template>
	<view class="container">
		<template v-if="pays.addressList.length > 0">
			<view class="content">
				<view class="list_box" v-for="(addressItem,addressIndex) in pays.addressList" :key="addressItem.id"
					@tap.stop="boxBtn(pays.query.select,addressItem)">
					<view class="list_title">
						<view class="list_title_left">
							<view class="user_name">{{addressItem.name}}</view>
							<view class="user_iphone">{{addressItem.mobile}}</view>
						</view>
						<view class="list_title_right" @tap.stop="boxBtn(false,addressItem)">
							<text v-if="pays.query.select">编辑</text>
							<uni-icons type="right" :color="'#1A1A1A'" :size="16"></uni-icons>
						</view>
					</view>
					<!-- <view class="list_content">{{addressItem.province}} {{addressItem.city}} {{addressItem.area}}
						{{addressItem.address}}
					</view> -->
					<view class="list_content">{{addressItem.province}}{{addressItem.city}}{{addressItem.area}}{{addressItem.locationAddress}}{{addressItem.address}}</view>
					<view class="list_btn" v-if="!pays.query.select">
						<view class="list_btn_left" @tap.stop="isDefault(addressItem)">
							<image :src="addressItem.isDefault ? `${iconUrl}13.png` : `${iconUrl}12.png`" mode=""></image>
							<text>{{addressItem.isDefault ? '默认地址' : '设为默认地址'}}</text>
						</view>
						<view class="list_btn_right" @tap.stop="delAddress(addressItem.id)">
							<image :src="`${iconUrl}08.png`" mode=""></image>
							<text>删除</text>
						</view>
					</view>
				</view>
				<uni-load-more iconType="auto" :status="pays.loading" />
			</view>
		</template>
		<template v-if="pays.blankShow">
			<view class="blank_box">
				<image :src="`${iconUrl}54.png`" mode="widthFix"></image>
				<text>您还没有添加地址～</text>
			</view>
		</template>
		<view class="foot">
			<view class="foot_btn_box">
				<view class="xjs-btn-primary" @click="goSetAddress">新增地址</view>
			</view>
		</view>
		
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { reactive, onMounted, computed, ref } from 'vue'
	import api from '@/api'
	import { useUserStoreToRefs } from '@/store/useUserStore'
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
	import { useOrderStoreToRefs } from "@/store/useOrderStore"
	const { addressInfo } = useOrderStoreToRefs()

	const iconUrl = ref("https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-")
	const { userInfo } = useUserStoreToRefs()
	/* interface petListItem {
		petNickName : string,
		petAvatar : string,
		birthdayValue : string
	} */
	const pays = reactive<{
		query : Partial<{
			select : string | boolean
		}>
		addressList : [],
		loading : string,
		page : number
		limit : number
		blankShow: boolean
	}>({
		query: {},
		addressList: [],
		loading: 'more',
		page: 1,
		limit: 20,
		blankShow: false
	})


	onLoad((options) => {
		if (options.select) {
			pays.query.select = options.select
			uni.setNavigationBarTitle({
				title: '选择地址'
			});
		}
		///getaddressList()

	})
	onShow(() => {
		getaddressList()
	})
	const goSetAddress = () => {
		uni.navigateTo({
			url: '/pages/addressManagement/setAddress/index'
		})
	}
	const boxBtn = (type : any, item : any) => {
		console.log(type, 'type')
		if (type) {
			addressInfo.value = item
			uni.navigateBack()
		} else {
			uni.navigateTo({
				url: `/pages/addressManagement/setAddress/index?id=${item.id}`
			})
		}
	}
	const getaddressList = async () => {
		uni.showLoading({
			title: '加载中',
			mask: true
		})
		pays.loading = 'loading'
		const { data: { total = 0, records = [] } } : any = await api({
			method: 'get',
			url: `/mall/users-addr/page`,
			data: {
				page: pays.page,
				limit: pays.limit,
				userId: userInfo.value.id
			}
		})
		if (records) {
			pays.addressList = pays.page == 1 ? records : pays.addressList.concat(records)
			if (!records.length || pays.addressList.length >= total) {
				pays.loading = 'noMore'
			} else {
				pays.loading = 'more'
			}
			pays.blankShow = pays.addressList.length > 0 ? false : true
			console.log(pays.addressList, 'pays.addressList')
		} else {
			pays.loading = 'more'
			pays.blankShow = true
		}
		uni.hideLoading()
	}
	const isDefault = async (item : any) => {

		const res : any = await api({
			method: 'get',
			url: `/mall/users-addr/updateDefault/${item.id}/${item.isDefault ? 0 : 1}`,
		})
		if (res.code == 0) {
			uni.showToast({
				title: '设置成功',
				icon: 'none'
			})
			await onDataInit()
			await getaddressList()
		}
		/* /updateDefault/{id}/{status} */
	}
	const delAddress = async (id : any) => {
		/* /users-addr/{id} */
		/* /updateDefault/{id}/{status} */
		uni.showModal({
			title: '提示',
			content: '确认删除地址吗?',
			success: async (res) => {
				if (res.confirm) {
					const res : any = await api({
						method: 'delete',
						url: `/mall/users-addr/${id}`,
					})
					if (res.code == 0) {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						await onDataInit()
						await getaddressList()
					} else {

					}
				} else if (res.cancel) {

				}
			}

		})

	}
	const onDataInit = async () => {
		pays.page = 1
	}
	const scrollToTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		})
	}
	// 页面下拉刷新
	onPullDownRefresh(async () => {
		console.log('onPullDownRefresh');
		if (pays.loading == 'loading') {
			uni.stopPullDownRefresh()
		} else {
			try {
				await onDataInit()
				await getaddressList()
			} catch (error) {
			}
			uni.stopPullDownRefresh()
		}
	})
	// 触底
	onReachBottom(async () => {
		console.log('onReachBottom');
		if (pays.loading == 'noMore') return false
		pays.page++
		await getaddressList()
		
	})
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F9F6F6;
		height: 100%;
		box-sizing: border-box;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
	}

	.content {
		padding-top: 32rpx;

		.list_box {
			width: 686rpx;
			margin: 0 auto;
			margin-bottom: 32rpx;
			padding: 40rpx 32rpx 24rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 24rpx;
			line-height: 1;
		}

		.list_title {
			margin-bottom: 38rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.list_title_left {
				display: flex;
				align-items: center;
				color: #1B2120;

				.user_name {
					margin-right: 24rpx;
					font-size: 32rpx;
					font-weight: bold;
				}

				.user_iphone {
					font-size: 28rpx;
				}
			}

			.list_title_right {
				text {
					font-size: 28rpx;
					color: #1B2120;
				}
			}
		}

		.list_content {
			margin-bottom: 40rpx;
			font-size: 28rpx;
			color: #7C807F;
			line-height: 1.4;
			word-break: break-all;
		}

		.list_btn {
			padding-top: 28rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 2rpx solid #E4E6E6;
			font-size: 28rpx;
			color: #1A1A1A;

			image {
				width: 32rpx;
				height: 32rpx;
			}

			.list_btn_left {
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					margin-right: 16rpx;
				}

			}

			.list_btn_right {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

	}

	.foot {
		line-height: 1;
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		padding-top: 8rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 8rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 8rpx);
		display: flex;
		justify-content: center;

		.foot_btn_box {
			display: flex;
			justify-content: center;
			width: 686rpx;
		}
	}
	.blank_box {
		width: 686rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		padding: 300rpx 0;
		background: #fff;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		image {
			width: 400rpx;
			height: 400rpx;
			margin-bottom: 40rpx;
		}
		text {
			font-size: 32rpx;
			color: #1B2120;
		}
		
	}
</style>